<template>
	<view class="ggIndex">
		<!-- 顶部分类导航栏 -->
		<view class="topTypeNav">
			<u-tabs :list="typeList" :current="current"></u-tabs>
		</view>
		<!-- 商品列表 -->
		<view class="goodsListDiv">
			<view class="goodsDiv" @click="toGoodsInfo" v-for="(item,index) in goodsList" :key="index">
				<view class="goodsImgDiv">
					<img style="width: 100%;height: 100%;"  :src="item.goodsFileUrl" />
				</view>
				<u-row>
					<u-col span="12">
						<u-row>
							<u-col span="4"> 
								<u-tag v-if="item.isHaveMail" size="mini" style="float: left;display: inline-block;width: 40px;" text="包邮" type="warning" mode="plain" />
								<u-tag v-else size="mini" style="float: left;display: inline-block;width: 40px;" text="自提" type="primary" mode="plain" />
							</u-col>
							<u-col span="8">
								<text class="mt" style="display: inline-block;float: left;font-weight: bold;font-size: 0.8em;">{{ item.name }}</text>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="12">
						<text class="mt" >
							<text style="color:red;font-weight: bold;">¥{{ item.price }}</text>
							<text v-if="item.oldPrice!=0.0" style="color:darkgrey;font-weight: lighter;text-decoration: line-through;">{{ item.oldPrice }}</text>
						</text>
					</u-col>
				</u-row>
				<u-row  >
					<u-col span="12">
						<text class="mt" style="color:gray;font-weight: lighter;">{{ item.sendUpUserName }}</text>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				// 分类数据
				typeList:[
					{name:"推荐"},
					{name:"奢侈品"},
					{name:"狗子"},
					{name:"项链"},
					{name:"吉他"},
					{name:"游戏机"}
				],
				// 商品数据
				goodsList:[
					{
						goodsFileUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01s8EME22ASZGTZoTyK_%21%212212990128202-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687606009&t=9c3decdb8ec98019611e8410cd81beb9",// 商品图片
						isHaveMail:false, // 是否包邮：false 自提，true 包邮
						name:"8成新熊宝宝毛绒玩具小牛", // 商品名称
						price:462, // 商品价格
						oldPrice:0.0 ,// 商品原价
						sendUpUserName:"蔡徐坤",  // 发布人的名字
						sendUpUserPhotoUrl:"https://img2.baidu.com/it/u=2522246555,2697580792&fm=253&fmt=auto&app=138&f=JPG?w=500&h=253" // 发布人的头像
					},
					{
						goodsFileUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01s8EME22ASZGTZoTyK_%21%212212990128202-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687606009&t=9c3decdb8ec98019611e8410cd81beb9",// 商品图片
						isHaveMail:true, // 是否包邮：false 自提，true 包邮
						name:"8成新熊宝宝毛绒玩具小牛", // 商品名称
						price:462, // 商品价格
						oldPrice:1888,// 商品原价
						sendUpUserName:"蔡徐坤",  // 发布人的名字
						sendUpUserPhotoUrl:"https://img2.baidu.com/it/u=2522246555,2697580792&fm=253&fmt=auto&app=138&f=JPG?w=500&h=253" // 发布人的头像
					},{
						goodsFileUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01s8EME22ASZGTZoTyK_%21%212212990128202-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687606009&t=9c3decdb8ec98019611e8410cd81beb9",// 商品图片
						isHaveMail:false, // 是否包邮：false 自提，true 包邮
						name:"8成新熊宝宝毛绒玩具小牛", // 商品名称
						price:462, // 商品价格
						oldPrice:0.0 ,// 商品原价
						sendUpUserName:"蔡徐坤",  // 发布人的名字
						sendUpUserPhotoUrl:"https://img2.baidu.com/it/u=2522246555,2697580792&fm=253&fmt=auto&app=138&f=JPG?w=500&h=253" // 发布人的头像
					},{
						goodsFileUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01s8EME22ASZGTZoTyK_%21%212212990128202-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687606009&t=9c3decdb8ec98019611e8410cd81beb9",// 商品图片
						isHaveMail:false, // 是否包邮：false 自提，true 包邮
						name:"8成新熊宝宝毛绒玩具小牛", // 商品名称
						price:462, // 商品价格
						oldPrice:0.0 ,// 商品原价
						sendUpUserName:"蔡徐坤",  // 发布人的名字
						sendUpUserPhotoUrl:"https://img2.baidu.com/it/u=2522246555,2697580792&fm=253&fmt=auto&app=138&f=JPG?w=500&h=253" // 发布人的头像
					},{
						goodsFileUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01s8EME22ASZGTZoTyK_%21%212212990128202-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687606009&t=9c3decdb8ec98019611e8410cd81beb9",// 商品图片
						isHaveMail:false, // 是否包邮：false 自提，true 包邮
						name:"8成新熊宝宝毛绒玩具小牛", // 商品名称
						price:462, // 商品价格
						oldPrice:0.0 ,// 商品原价
						sendUpUserName:"蔡徐坤",  // 发布人的名字
						sendUpUserPhotoUrl:"https://img2.baidu.com/it/u=2522246555,2697580792&fm=253&fmt=auto&app=138&f=JPG?w=500&h=253" // 发布人的头像
					},{
						goodsFileUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01s8EME22ASZGTZoTyK_%21%212212990128202-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687606009&t=9c3decdb8ec98019611e8410cd81beb9",// 商品图片
						isHaveMail:false, // 是否包邮：false 自提，true 包邮
						name:"8成新熊宝宝毛绒玩具小牛", // 商品名称
						price:462, // 商品价格
						oldPrice:0.0 ,// 商品原价
						sendUpUserName:"蔡徐坤",  // 发布人的名字
						sendUpUserPhotoUrl:"https://img2.baidu.com/it/u=2522246555,2697580792&fm=253&fmt=auto&app=138&f=JPG?w=500&h=253" // 发布人的头像
					}
				]
			}
		},
		methods: {
			// 跳转到商品详情页
			toGoodsInfo(){
				// TODO: 路由跳转(H5跳转)
				this.$router.push("/pages/index/goodsInfo");
			}
		}
	}
</script>

<style scoped>
.ggIndex{
	width: 100vw;
	height: 100vw;
	box-sizing: border-box;
}
.topTypeNav{
	width: 100%;
	height: auto;
	padding-top: 160upx;
	background-color: #FEC104;
	padding-bottom: 10upx;
}
.goodsDiv{
	width: calc(50% - 10upx);
	height: 570upx;
	background-color: #FFF;
	margin-top: 15upx;
	box-sizing: border-box;
	padding: 15upx;
	border-radius: 8upx;
}
.goodsListDiv{
	width: 100%;
	height: auto;
	padding-left: 15upx;
	padding-right: 15upx;
	box-sizing: border-box;
	background-color: #bbbb;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.goodsImgDiv{
	width: 100%;
	height: 60%;
}
.mt{
	line-height: 35upx;
}
</style>